<template>
  <el-backtop style="width:60px;height:60px" :bottom="20" :right="20" />
  <router-link to="/"></router-link>
  <router-view></router-view>  
</template>

<script>
import {mapMutations} from 'vuex'

export default {
  name: 'App', 
  data(){
    return{
      route:''
    }
  },
  watch: {
    '$route':'getPath'
  },
  mounted(){
    this.initLang()
    this.reCountRem()
  },
  async created(){
    // 检测用户是否登录，保持用户登录活性
    let {data} = await this.$axios({
      method: 'post',
      url: '/login/check'
    })
    
    if(data.code){
      return
    }
    this.updateUserInfo(data.data)
  },
  methods:{
    ...mapMutations(['updateUserInfo']),
    getPath(){
      this.$nextTick(() => {
        setTimeout(() => {
          this.$zh_tran(localStorage.getItem('lang'))
          this.$setFont("#app", "SourceHanSerifCN-Medium")
        }, 200)
      })
    },
    // 初始化语言类型
    initLang(){
      if(!localStorage.getItem('lang')){
        if(navigator.language === 'zh-CN'){
          localStorage.setItem('lang', 's')
        }else{
          localStorage.setItem('lang', 't')
        }
        this.$zh_tran(localStorage.getItem('lang'))
      }else{
        setTimeout(() => {
          this.$zh_tran(localStorage.getItem('lang'))
        }, 1000)
      }
    },
    reCountRem() {
      var docEl = document.documentElement;
      var clientWidth = document.documentElement.clientWidth;
      if (!clientWidth) {
        return;
      }
      var remSize = parseInt(docEl.style.fontSize);
      var currentSize = window.getComputedStyle(document.getElementsByTagName("html")[0]).fontSize;
      if (currentSize) {        
        currentSize = currentSize.split("p")[0];
        var rate = currentSize / remSize;
        if (rate > 1.1) {
          docEl.style.fontSize = remSize / rate + 'px';
        }
      }
    }
  }
}
</script>

<style>
@import './assets/icon-font/iconfont.css';
@import './assets/css/reset.css';

/* 很小的设备（手机等，小于 600px） */
@media only screen and (max-width: 600px) {
  html{
    font-size: 10px;
  }
}

/* 比较小的设备（竖屏的平板，屏幕较大的手机等, 大于 600px） */
@media only screen and (min-width: 600px) {
  html{
    font-size: 10px;
  }
}

/* 中型大小设备（横屏的平板, 大于 768px） */
@media only screen and (min-width: 768px) {
  html{
    font-size: 12px;
  }
}

/* 大型设备（电脑, 大于 992px） */
@media only screen and (min-width: 992px) {
  html{
    font-size: 14px;
  }
}

/* 超大型设备（大尺寸电脑屏幕, 大于 1200px） */
@media only screen and (min-width: 1200px) {
  html{
    font-size: 16px;
  }
}

body{
  background-color: #f6f6f6;
  -webkit-font-smoothing: subpixel-antialiased;
}

body, button, input, optgroup, select, textarea {
  /* font-family: 'SourceHanSerifCN-Medium', Arial, sans-serif, serif; */
}

h1, h2, h3, h4, h5{
  /* font-family: Arial, sans-serif, serif; */
  margin: 16px 0;
  font-weight: 700;
}

.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}

#app {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  height: inherit;
}

/*::-webkit-scrollbar {
  width: 1vmin;     
  height: 1px;
}
::-webkit-scrollbar-thumb {
  -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
  background: rgba(30,41,54,1);
}
::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 5px rgba(200,200,200,0.2);
  border-radius: 1vmin;
  background: #fafafa;
}

::-webkit-scrollbar-thumb:hover{
  background: rgba(30,41,54,.6);
}*/
</style>
